<template>
  <card-layout title="预警统计" class="early-warning-statistics" bg="2">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeWarning',5)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>

    <div class="content-container">
      <div class="charts-container">
        <!-- 柱状图 -->
        <div class="chart-box">
          <div ref="barChartRef" class="chart"></div>
        </div>
        <!-- 饼图 -->
        <div class="chart-box">
          <div ref="pieChartRef" class="chart"></div>
        </div>
      </div>

     <!-- 筛选区域 -->
      <div class="filter-container">
        <div class="filter-row">
          <el-select style="width: 100px" v-model="riskType" placeholder="风险种类" class="filter-item">
            <el-option label="全部风险" value=""></el-option>
            <el-option label="gnss" value="gnss"></el-option>
            <el-option label="粉尘检测仪" value="粉尘检测仪"></el-option>
          </el-select>

          <el-select style="width: 100px" v-model="riskLevel" placeholder="风险等级" class="filter-item">
            <el-option label="预警结束" value="0"></el-option>
            <el-option label="红色预警" value="1"></el-option>
            <el-option label="橙色预警" value="2"></el-option>
            <el-option label="黄色预警" value="3"></el-option>
            <el-option label="蓝色预警" value="4"></el-option>
          </el-select>

          <el-input style="width: 100px" v-model="riskName" placeholder="风险名称" class="filter-item"></el-input>
          
          <el-date-picker
            style="width: 220px;"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            class="date-range-picker"
          />
          
          <el-button type="success" @click="handleSearch" class="search-btn">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" border>
          <el-table-column prop="deviceType" label="设备类型" align="center" ></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" align="center" width="180"></el-table-column>
          <el-table-column prop="warningLevel" label="预警等级" align="center" >
            <template #default="scope">
              <span :class="`warning-level-${scope.row.warningLevelKey}`">{{ scope.row.warningLevel }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="warningTime" label="预警时间" align="center" width="180"></el-table-column>
          <el-table-column label="操作" align="center" >
            <template #default>
              <div class="operation-btns">
                <el-button type="primary" size="small" circle>
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button type="primary" size="small" circle>
                  <el-icon><ChatDotRound /></el-icon>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
            :current-page="currentPage"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { Search, Close, View, ChatDotRound } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';
import { mineAlarmList, getAlarmChart } from '@/api/mineAlarm';


// 图表引用
const barChartRef = ref(null);
const pieChartRef = ref(null);

// 使用 hooks 初始化图表
const { chartInstance: barChart } = useChart(barChartRef);
const { chartInstance: pieChart } = useChart(pieChartRef);


// 搜索-筛选条件
const riskType = ref('');
const riskLevel = ref('');
const riskName = ref('');
const dateRange = ref([]);
const currentPage = ref(1);


// 表格数据
const tableData = ref([
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-01',
    warningLevel: '红色预警',
    warningLevelKey: 'red',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-02',
    warningLevel: '橙色预警',
    warningLevelKey: 'orange',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-03',
    warningLevel: '黄色预警',
    warningLevelKey: 'yellow',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-04',
    warningLevel: '蓝色预警',
    warningLevelKey: 'blue',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-边坡-01',
    warningLevel: '红色预警',
    warningLevelKey: 'red',
    warningTime: '2025-05-02 10:30:15'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-边坡-02',
    warningLevel: '黄色预警',
    warningLevelKey: 'yellow',
    warningTime: '2025-05-02 09:45:22'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-边坡-03',
    warningLevel: '橙色预警',
    warningLevelKey: 'orange',
    warningTime: '2025-05-02 08:20:05'
  }
]);

// 表格头部样式
const headerCellStyle = {
  background: '#0a2e5c',
  color: '#fff',
  fontWeight: 'bold',
  borderColor: '#164b87'
};

// 初始化柱状图
const initBarChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['GNSS预警'],
      textStyle: {
        color: '#fff'
      },
      top: 0,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2025-01', '2025-02', '2025-03', '2025-04'],
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: 'GNSS预警',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#f2910a'
        },
        data: [120, 80, 150, 60]
      }
    ]
  };

  barChart.value.setOption(option);
};

// 初始化饼图
const initPieChart = () => {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      },
      show: false
    },
    series: [
      {
        name: 'GNSS预警统计',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 2,
          borderColor: '#0a2e5c',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}\n{c}',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 120, name: '红色预警', itemStyle: { color: '#ff4d4f' } },
          { value: 80, name: '橙色预警', itemStyle: { color: '#fa8c16' } },
          { value: 150, name: '黄色预警', itemStyle: { color: '#fadb14' } },
          { value: 60, name: '蓝色预警', itemStyle: { color: '#1890ff' } }
        ]
      }
    ]
  };

  pieChart.value.setOption(option);
};

// 搜索处理
const handleSearch = () => {
  const [startDate, endDate] = dateRange.value || [null, null];
  mineAlarmList({
    equipType: riskType.value,
    alarmLevel: riskLevel.value,
    equipName: riskName.value,
    startTime: startDate,
    endTime: endDate,
    openPitNo: '2655070207901573'
  }).then(response => {
    console.log(response,'????????');
    
    tableData.value = response.data || [];
  }).catch(error => {
    console.error('搜索失败:', error);
  });

};

const getLeftBarChartData = async () => {
  // const data = await getAlarmChart({
  //   openPitNo: '2655070207901573',
  // })

  nextTick(() => {
    initBarChart()
  })
}

const getRightPieChartData = async () => {
  // const data = await getAlarmChart({
  //   openPitNo: '2655070207901573',
  // })

  nextTick(() => {
    initPieChart()
  })
};

onMounted(() => {
  // 初始化左侧图表
  getLeftBarChartData()
  // 初始化右侧图表
  getRightPieChartData()
})

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以添加分页加载数据的逻辑
};

</script>

<style lang="scss" scoped>
.early-warning-statistics {
  box-sizing: border-box;
  width: 100%;
  min-width: 800px;
  color: #fff;
  
  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }
  
  .more-div:active {
    scale: 0.8;
  }
  
  .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    height: calc(100% - 44px);
    overflow: hidden;

    .charts-container {
      display: flex;
      height: 250px;

      .chart-box {
        flex: 1;
        border-radius: 4px;
        padding: 8px;

        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }

    .filter-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 10px; 
      .filter-row {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .filter-item {
        // 宽度通过内联样式控制
      }

      .search-btn {
        margin-left: auto;
      }
    }

    .table-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      padding: 8px;
      overflow: hidden;

      .warning-level-red {
        color: #ff6b6b;
        font-weight: bold;
      }

      .warning-level-orange {
        color: #ff9f43;
        font-weight: bold;
      }

      .warning-level-yellow {
        color: #feca57;
        font-weight: bold;
      }

      .warning-level-blue {
        color: #54a0ff;
        font-weight: bold;
      }

      .operation-btns {
        display: flex;
        justify-content: center;
        gap: 8px;
      }

      .pagination {
        margin: 20px 0px;
        display: flex;
        justify-content: center;
      }
    }
  }
}


:deep(.header) {
  background-position: left !important;
    background-size: contain !important;
}


// 覆盖 Element Plus 样式
:deep(.el-table) {
  background-color: transparent;
  color: #fff;
  height: 2rem;

  th.el-table__cell {
    background-color: #0a2e5c;
  }

  td.el-table__cell {
    background-color: rgba(16, 65, 125, 0.3);
    border-color: rgba(31, 198, 255, 0.3);
  }

  tr:hover > td.el-table__cell {
    background-color: rgba(22, 75, 135, 0.5) !important;
  }
}

:deep(.el-pagination) {
  --el-pagination-bg-color: rgba(16, 65, 125, 0.5);
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #409eff;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(16, 65, 125, 0.3);
  box-shadow: 0 0 0 1px rgba(31, 198, 255, 0.3) inset;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-select-dropdown__item) {
  color: #fff;
}

:deep(.el-select-dropdown) {
  background-color: #0a2e5c;
  border: 1px solid rgba(31, 198, 255, 0.3);
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(22, 75, 135, 0.5);
}

:deep(.el-date-editor) {
  --el-datepicker-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-text-color: #fff;
  --el-datepicker-inner-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-off-text-color: #888;
  --el-datepicker-header-text-color: #fff;
}
</style>